import {ScrollView, View, Image} from '@tarojs/components';
import React, {Component} from 'react';
import Taro from '@tarojs/taro';
import {connect} from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import {store2Props} from './selectors';
import {AtIcon} from 'taro-ui';
import 'taro-ui/dist/style/components/icon.scss';
import TaskProcess from './components/taskProcess';
import TaskList from './components/taskList';
import CompleteTaskModel from './components/completeTaskModel';
import api from 'api';
import dayjs from 'dayjs';
actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class ActivationRecord extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      navBarHeight: 0,
      completeTaskModel: {
        show: false,
        title: '恭喜完成任务',
        content: '恭喜您活跃度，获得每日礼包',
      },
      navBarPadding: 0,
      // navBarPaddingR: 0,
    };
  }
  componentDidMount() {
    this.getNavHeight();
  }
  async componentDidShow() {
    this.props.actions.init();
    Taro.removeStorageSync('task');
    const currentTime = dayjs().format('YYYY/MM/DD');
    const taskModelTime = Taro.getStorageSync('taskModelTime');
    const result = await api.TaskCenterController.getTaskModel();
    if (result && taskModelTime !== currentTime && result.completedActivation >= result.giftCondition) {
      Taro.setStorageSync('taskModelTime', currentTime);
      this.setState({
        completeTaskModel: {
          ...this.state.completeTaskModel,
          show: true,
          content: `恭喜您活跃度${result.completedActivation},获得每日礼包`,
        },
      });
    }
  }
  getNavHeight() {
    const menuButtonObject = Taro.getMenuButtonBoundingClientRect();

    let menuBottonHeight = menuButtonObject.height;
    let navBarPadding = menuButtonObject.top;
    let navBarHeight = menuBottonHeight + navBarPadding;
    this.setState({
      navBarHeight,
      navBarPadding: navBarPadding,
    });
  }

  render() {
    return (
      <View className="taskCenterMain">
        <View
          style={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            paddingTop: `${this.state.navBarPadding}px`,
            height: `${this.state.navBarHeight}px`,
          }}
        >
          <AtIcon
            onClick={() => {
              Taro.navigateBack();
            }}
            customStyle={{zIndex: 2}}
            value="chevron-left"
            size="30"
            color="#000"
          ></AtIcon>
          <View
            style={{
              fontSize: '36rpx',
              fontWeight: 500,
              color: '#333333',
              margin: '0 auto',
              zIndex: 2,
              transform: 'translateX(-36%)',
            }}
            onClick={() => {
              this.setState({
                completeTaskModel: {
                  show: true,
                },
              });
            }}
          >
            任务中心
          </View>
        </View>
        <Image
          src="https://ruiyinmall.oss-cn-nanjing.aliyuncs.com/ruizhimini/taskCenter_bg.png"
          className="taskCenterMain-bg"
        />
        <View style={{padding: '44rpx 32rpx 0px'}}>
          <TaskProcess />
        </View>
        <View style={{margin: '-20rpx 32rpx 0px', zIndex: 4, borderRadius: '24rpx', background: '#fff'}}>
          <ScrollView scrollY style={{height: '76vh'}}>
            <TaskList />
          </ScrollView>
        </View>
        <CompleteTaskModel
          close={() => {
            Taro.setStorageSync('taskModelTime', dayjs().format('YYYY/MM/DD'));
            this.setState({
              completeTaskModel: {
                show: false,
              },
            });
          }}
          showTopTitle
          isOpened={this.state.completeTaskModel.show}
          title={this.state.completeTaskModel.title}
          content={this.state.completeTaskModel.content}
        />
      </View>
    );
  }
}
